<!-- 饼状图 -->
<template>
  <div
    class="chartcontainer"
    v-if="setrefresh"
  >
    <div :style="{'margin-bottom':'10px'}" v-if="title">{{title}}</div>
    <ve-pie
      :data="blockdata"
      width="100%"
      height="100%"
      :settings="chartSettings"
      ref="mychart"
      :theme="theme"
      :judge-width="true"
      :after-config="afterConfig"
    ></ve-pie>
  </div>
</template>

<script>
import VePie from "v-charts/lib/pie.common";
import { mBack, getToken, back } from "../../../assets/js/common.js";
import { fetch, post } from "../../../config/request.js";
export default {
  props: [
    "diyposition",
    "chartData",
    "changesizewidth",
    "changesizeheight",
    "colors",
    "timer",
    "theme",
    "title",
    "searchid",
    "chartid",
    "ringwidth",
    "field",
    "drill",
    "isShowLegend"//用户判断是否显示图注
  ],
  data() {
    this.chartSettings = {
      offsetY: this.ringwidth / 2,
      radius: this.ringwidth / 3,
      label: {
        normal: {
          formatter: params => {
            return `${params.data.name} \n ${this.chartData.columns[1]}:${params.data.value}(${params.percent}%)`;
          }
        }
      }
    };
    return {
      blockdata: this.chartData,
      intervaltime: this.timer,
      setrefresh: true
    };
  },

  components: { VePie },

  computed: {},
  mounted() {
   },
  destroyed() { },
  methods: {
    afterConfig(options) {
      if (this.isShowLegend) {
        options.legend = {
          data: []
        }
      }

      // options.series = [
      //   {
      //     type: "pie",
      //     center: ["90%", "50%"]
      //   }
      // ];
      return options;
    }
  },
  watch: {
    changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    changesizeheight(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    ringwidth(oldvalue, newvalue) {
      this.setrefresh = false;
      this.chartSettings = {
        offsetY: this.ringwidth / 2,
        radius: this.ringwidth / 3,
        label: {
          normal: {
            formatter: params => {
              return `${params.data.name}  ${this.chartData.columns[1]}:${params.data.value}(${params.percent}%)`;
            }
          }
        }
      };
      this.setrefresh = true;
    },
    chartData(oldvalue, newvalue) {
      this.blockdata = oldvalue;
      //??????
      this.chartSettings = {
        yAxisName: [`${this.chartData.columns[1]}`], //   xAxisName: this.chartData.columns[0]
        label: {
          normal: {
            formatter: params => {
              return `${params.data.name} \n ${this.chartData.columns[1]}:${params.data.value}(${params.percent}%)`;
            }
          }
        },
        dataType: value => {
          return `${this.chartData.columns[1]}:${value}`;
        }
      };
      this.$refs.mychart.echarts.setOption({
        series: {
          data: this.blockdata
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.chartcontainer {
  width: 100%;
  height: 100%;
}
</style>